<template>
  <view class="container" id="render-sub">
    <view class="mh30 mt30 pb30 header">
      <view class="pt30 pl30 lh175 font-bold word-break" style="width: 55%; font-size: 46rpx">
        {{ title }}
      </view>
      <!-- 		<view class="">
				<image src="/static/images/Slice 22@3x.png"></image>
			</view> -->
      <view class="tag">
        <image src="/static/images/icon/tag.png" mode="widthFix"></image>
      </view>

      <view class="mh30 mt20 br30 album">
        <image src="/static/images/bag.png" style="width: 100%" mode="widthFix"></image>
      </view>
      <view class="mh30 mt25 mb10 text-gray fs14">规格型号</view>
      <view class="mh30 mt10 text-black fs16 font-bold">
        <template v-if="(typeof specifications).toString() === 'object'">
          <view class="mt10 flex" style="flex-direction: column">
            <text v-for="(item, index) in specifications" :key="index" class="text-black fs16 font-bold">{{ item }}</text>
          </view>
        </template>
        <template v-else>
          <view class="mh30 mt10 text-black fs16 font-bold">{{ specifications }}</view>
        </template>
      </view>
      <view class="mh30 mt25 mb10 text-gray fs14">品牌方</view>
      <view class="mh30 mt10 text-black fs16 font-bold">{{ brand }}</view>
    </view>
    <view class="mh40">
      <view class="line2x mh15"></view>
    </view>
    <view class="mh30 br30 background-color-white border-white">
      <view class="mh30 mt30 text-black fs18 font-bold">产品碳足迹</view>
      <view class="mh30 mt10 mb10 text-gray fs14">产品生命周期内产生的温室气体排放量</view>
      <view class="mh30 mv10 mb5 text-black flex-start">
        <view class="font-bold" style="font-size: 80rpx">{{ carbon_emission }}</view>
        <view class="font-bold ml20" style="font-size: 60rpx; margin-top: 10px">{{ carbon_emission_unit }}</view>
      </view>
      <view class="mh30 mb30 mt15 fs14 flex-row flex" style="color: #28a6ff">
        <image src="/static/images/Slice 3@3x.png" style="width: 40rpx; margin-right: 5px" mode="widthFix"></image>
        该产品已通过自愿注销碳配额实现碳中和</view
      >
    </view>
    <view class="mh40">
      <view class="line2x mh15"></view>
    </view>
    <view class="mh30 br30 pb20 background-color-white border-white">
      <view class="mh30 mt30 text-black fs18 font-bold">产品原碳排放量</view>
      <view class="mh30 mv20 fs16 text-black flex-start">
        <view class="font-bold" style="font-size: 60rpx">{{ credit_limit }}</view>
        <view class="font-bold ml20" style="font-size: 40rpx; margin-top: 10px">{{ credit_limit_unit }}</view>
      </view>
      <view class="mh30 mt40 mb20 text-black space-between">
        <view class="font-bold">原材料获取</view>
        <view class="font-bold ml20">{{ carbon_materials_ratio }}%</view>
      </view>
      <view class="mh30 mt10 mb20 text-black space-between">
        <image src="/static/images/p1_bag.png" style="width: 100%" mode="widthFix"></image>
      </view>

      <!-- <progress class="mh30 mb30" :percent="carbon_materials_ratio" stroke-width="3" activeColor="#28a6ff"></progress> -->
      <view class="mh30 mt40 mb20 fs16 text-black space-between">
        <view class="font-bold">生产阶段</view>
        <view class="font-bold ml20">{{ carbon_production_ratio }}%</view>
      </view>
      <view class="mh30 mt10 mb20 text-black space-between">
        <image src="/static/images/p2_bag.png" style="width: 100%" mode="widthFix"></image>
      </view>
      <!-- <progress class="mh30 mb30" :border-radius="borderRadius" :percent="carbon_production_ratio" stroke-width="10" activeColor="#28a6ff"></progress> -->
      <view class="mh30 mt40 mb20 fs16 text-black space-between">
        <view class="font-bold">分销阶段</view>
        <view class="font-bold ml20">{{ carbon_agent_ratio }}%</view>
      </view>
      <view class="mh30 mt10 mb20 text-black space-between">
        <image src="/static/images/p3_bag.png" style="width: 100%" mode="widthFix"></image>
      </view>
      <!-- <progress class="mh30 mb30" :percent="carbon_agent_ratio" stroke-width="3" activeColor="#28a6ff"></progress> -->
      <view class="mh30 mt40 mb20 fs16 text-black space-between">
        <view class="font-bold">使用阶段</view>
        <view class="font-bold ml20">{{ carbon_use_ratio }}%</view>
      </view>
      <view class="mh30 mt10 mb20 text-black space-between">
        <image src="/static/images/p4_bag.png" style="width: 100%" mode="widthFix"></image>
      </view>
      <!-- <progress class="mh30 mb30" :percent="carbon_use_ratio" stroke-width="3" activeColor="#28a6ff"></progress> -->
      <view class="mh30 mt40 mb20 fs16 text-black space-between">
        <view class="font-bold">废弃物处置</view>
        <view class="font-bold ml20">{{ carbon_waste_ratio }}%</view>
      </view>
      <view class="mh30 mt10 mb20 text-black space-between">
        <image src="/static/images/p5_bag.png" style="width: 100%" mode="widthFix"></image>
      </view>
      <!-- <progress class="mh30 mb30" :percent="carbon_waste_ratio" stroke-width="3" activeColor="#28a6ff"></progress> -->
    </view>
    <view class="mh40">
      <view class="line2x mh15"></view>
    </view>
    <view class="mh30 br30 pb20 background-color-white border-white">
      <view class="mh30 mt30 text-black fs18 font-bold">碳抵消额度</view>
      <view class="mh30 mv20 fs16 text-black flex-start">
        <view class="font-bold" style="font-size: 60rpx">{{ credit_limit }}</view>
        <view class="font-bold ml20" style="font-size: 40rpx; margin-top: 10px">{{ credit_limit_unit }}</view>
      </view>
      <view class="mh30 mt10 text-gray fs14">碳抵消方式</view>
      <view class="mh30 mt10 text-black fs16 font-bold">{{ credit_limit_type_name }}</view>
      <view class="mh30 mt30 text-gray fs14">碳配额来源</view>
      <view class="mh30 mt10 mb10 text-black fs16 font-bold" style="line-height: 2">{{ credit_limit_origin_name }}</view>
    </view>
    <view class="mg40 text-center text-primary" style="font-family: Arial, Helvetica, sans-serif">数据统计时段：{{ count_start }}-{{ count_end }}</view>
    <view class="space-between" style="margin: 0 10%">
      <view class="flex-content-center" style="width: 46%">
        <view class="text-center btn-white text-black pv20 ph50 fs16 font-bold" @click="showCertificate()">查看证书</view>
      </view>
      <view class="flex-content-center" style="width: 46%">
        <view class="text-center btn-share text-white pv20 ph50 fs16 font-bold" @click="openShare()">分享碳足迹</view>
      </view>
    </view>
    <view class="mg40 logo text-center">
      <image src="/static/images/tphlogo.png" mode="heightFix"></image>
    </view>
    <uni-popup ref="cert" background-color="transparent" :mask-click="false">
      <view class="mh30 br20 background-color-white border-white cert">
        <view class="mh30 mv30 br30 album" style="">
          <image class="base-img" src="@/static/images/zs_bag.jpg" style="width: 100%" mode="widthFix"></image>
        </view>
      </view>

      <!-- <view class=" mh30 br10 background-color-white border-white ">
				<view class="mv20 text-center text-black font-bold">长按保存图片以分享</view>
			</view> -->
      <view class="mh30 mt30 flex flex-middle" style="margin: 0 auto">
        <view @click="closeCertificate()" class="circular text-white text-center fs14 pd15">
          <image style="width: 70rpx; hegiht: 70rpx" src="/static/images/close.png" mode="widthFix"></image>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="share" background-color="transparent" :mask-click="false" type="bottom">
      <view class="mh30 br20 pb20 background-color-white border-white">
        <scroll-view class="scroll-view" scroll-y="true">
          <!-- 这里是你的滚动内容 -->
          <view class="mh30 mv30 br10 album" style="height: 70vh">
            <image class="base-img" src="/static/images/share_bag.png" style="width: 100%" mode="widthFix"></image>
          </view>
        </scroll-view>
      </view>

      <view class="mh30 br20 background-color-white border-white">
        <view class="line2x mh15" style="margin-top: -1px"></view>
        <view class="mv20 text-center text-black font-bold">长按保存图片以分享</view>
      </view>
      <!-- 	<view class=" mh30 br10  " style="padding:5px 0;background: linear-gradient(90deg, #62E6E7 0%, #28A5FF 100%);">
				<view class="mv20 text-center text-white  fs18">长按保存图片以分享</view>
			</view> -->
      <view class="mh30 mt30 flex flex-middle pb30" style="margin: 0 auto">
        <view @click="closeShare()" class="circular text-white text-center fs14 pd15">
          <image style="width: 70rpx; hegiht: 70rpx" src="/static/images/close.png" mode="widthFix"></image>
        </view>
      </view>
    </uni-popup>

    <sp-html2canvas-render domId="render-sub" ref="renderRef" @renderOver="renderOver"></sp-html2canvas-render>

    <!-- <button class="exp-btn" size="mini" @click="cusRenderDom">示例1导出</button> -->

    <!--  -->
    <sp-html2canvas-render domId="render-sub" ref="renderRef" @renderOver="renderOver"></sp-html2canvas-render>

    <!-- <button class="exp-btn" size="mini" @click="cusRenderDom">示例1导出</button> -->

    <!-- <image class="base-img" :src="reviewBaseImg" mode="widthFix"></image> -->
  </view>
</template>

<script>
import { base64ToPath } from '@/uni_modules/sp-html2canvas-render/components/sp-html2canvas-render/util.js'
export default {
  data() {
    return {
      borderRadius: 0,
      showDelayDom: false,
      reviewBaseImg: '',
      list: [],
      id: 1,
      title: '“武碳江湖”文创— —针织袋',
      specifications: ['武碳江湖文创产品 ', '吨吨鸭针织袋（35*20*9cm）'],
      brand: '武汉碳普惠管理有限公司',
      carbon_emission: '0.00',
      carbon_emission_unit: 'gCO₂e',
      carbon_materials_ratio: '74',
      carbon_production_ratio: '8.2',
      carbon_agent_ratio: '0.7',
      carbon_use_ratio: '0.0',
      carbon_waste_ratio: '17.1',
      credit_limit: '375.07',
      credit_limit_unit: 'gCO₂e',
      credit_limit_type_id: '1',
      credit_limit_type_name: '湖北碳配额',
      credit_limit_origin_id: '1',
      credit_limit_origin_name: '由湖北中碳资产管理有限公司赞助的1吨湖北碳配额抵销了该批次500个功能单位的187.54kgCO₂碳排放',
      count_start: '2024/4/29',
      count_end: '2024/5/23',
    }
  },

  onShow() {
    this.getData()
  },
  //
  onShareAppMessage: function () {
    // return {
    // 	title: this.userInfo.nickname + '-分销海报',
    // 	imageUrl: this.spreadList[0].pic,
    // 	// path: `/pages/index/index?id=0&inviteCode=${this.userInfo.inviteCode}` ,
    // };
  },

  onLoad() {
    var that = this
    // that.toDrawCanvas()
  },

  methods: {
    renderOver(e) {
      this.reviewBaseImg = e
      this.showDelayDom = true
      // console.log('==== renderOver :', e);
      base64ToPath(e).then((res) => {
        console.log('==== base64ToPath :', res)
      })

      this.$refs.share.open()
    },
    cusRenderDom() {
      this.$refs.renderRef.h2cRenderDom()
    },
    // //绘制canvas
    // 	toDrawCanvas() {
    // 		let that=this
    // 		let ctx = uni.createCanvasContext('firstCanvas',this)//后来又做了一个分享的项目，发现不加this就不能用
    // 		//uni.upx2px()是尺寸单位转换方法，622为rpx单位，换成px为311，根据设计稿来编辑
    // 		let canvaWidth=uni.upx2px(622)
    // 		let canvaHight=uni.upx2px(984)
    // 		//绘制文字居中对齐使用，根据我的理解，这个数值是要为需要截图区域宽度的一半
    // 		let centerCode=uni.upx2px(311)
    // 		let xx=uni.upx2px(64)
    // 		let yy=uni.upx2px(48)
    // 		let font=uni.upx2px(32)//字体大小
    // 		let yzmtop=uni.upx2px(130)
    // 		let yzmleft=uni.upx2px(232)
    // 		let imgurl='../../static/img/my/yqm.png'//设置背景图的路径
    // 		ctx.drawImage(imgurl,0,0,canvaWidth,canvaHight)
    // 		//绘制您的邀请码文字
    // 		ctx.setFillStyle('#333333')//文字颜色
    // 		ctx.setFontSize(font)
    // 		ctx.textAlign="center"//居中，而且这个需要放在ctx.setFontSize()后面，其他api就没去一一使用过
    // 		//绘制文字ctx.fillText(需要绘制的文字,x轴距离,y轴距离);
    // 		ctx.fillText("您的邀请码",centerCode,yzmtop);
    // 		//绘制邀请码文字
    // 		let yqmwenzix=uni.upx2px(311)
    // 		let yqmwenziy=uni.upx2px(227)
    // 		let yamcodes="邀请码"//这个是放邀请码
    // 		ctx.setFillStyle('#fff')
    // 		ctx.setFontSize(font)
    // 		ctx.textAlign="center"
    // 		ctx.fillText(yamcodes,yqmwenzix,yqmwenziy);
    // 		//绘制复制邀请码
    // 		let copyMx=uni.upx2px(310)
    // 		let copyFont=uni.upx2px(28)
    // 		ctx.setFillStyle('#EEB826')
    // 		ctx.setFontSize(copyFont)
    // 		ctx.textAlign="center"
    // 		ctx.fillText("复制邀请码",yqmwenzix,copyMx);
    // 		//绘制二维码位置
    // 		let erweimaimg='../../static/img/my/appload.png'
    // 		let towCodeX=uni.upx2px(172)
    // 		let towCodeY=uni.upx2px(436)
    // 		let towCodeW=uni.upx2px(280)
    // 		ctx.drawImage(erweimaimg,towCodeX,towCodeY,towCodeW,towCodeW)
    // 		//绘制扫码下载APP文字
    // 		let apploady=uni.upx2px(790)
    // 		ctx.setFillStyle('#333333')
    // 		ctx.setFontSize(font)
    // 		ctx.textAlign="center"
    // 		ctx.fillText("扫码下载APP",yqmwenzix,apploady);
    // 		//绘制分享好友文字
    // 		let shareY=uni.upx2px(890)
    // 		ctx.setFillStyle('#FFFFFF')
    // 		ctx.setFontSize(font)
    // 		ctx.textAlign="center"
    // 		ctx.fillText("分享好友",yqmwenzix,shareY);
    // 		ctx.draw()//结束绘画
    // 	},

    getData() {},
    showCertificate() {
      this.$refs.cert.open()
    },

    closeCertificate() {
      this.$refs.cert.close()
    },
    openShare() {
      this.cusRenderDom()
    },
    closeShare() {
      this.$refs.share.close()
    },
  },
}
</script>

<style lang="scss">
	

page {
  background-color: #9feffa;
}

/deep/ .uni-progress-inner-bar {
  margin-left: 1px !important;
  // width:40px !important;;
  border-radius: 50% !important;
  background: linear-gradient(to right, #28a5ff, #61e5e7);
}



.container {
  background: linear-gradient(180deg, #9feffa 0%, #d7eaff 100%);
}

.header {
  background-image: url('@/static/images/topbg.png');
  background-size: cover;
  // background-size:100%;
  background-repeat: no-repeat;
  background-position:top; 
  // height: 488rpx;
  padding-bottom: 15px;
  border-top-left-radius: 40rpx;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}
.tag {
  position: absolute;
  top: 125rpx;
  left: 45%;
  z-index: 97;

  image {
    width: 300rpx;
    // height: 106rpx;
  }
}

.album {
  // height: 400rpx;
  // background: #EDF9FF;

  image {
    height: 400rpx;
  }
}

.btn-white,
.btn-share {
  border-radius: 50px;
}

.btn-share {
  background: linear-gradient(90deg, #62e6e7 0%, #28a5ff 100%);
}

.logo {
  image {
    // width: 174px;
    height: 46rpx;
  }
}

.cert {
  width: 680rpx;
}

.close {
  opacity: 0.6;
  border: 3px solid #fff;
  background-color: #333333;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
}

/deep/.uni-progress-bar {
  border-radius: 30px !important;
}

/deep/.uni-progress-inner-bar {
  border-radius: 30px !important;
}

/deep/.uni-progress-bar {
  height: 20rpx !important;
}
</style>
